<template>
  <div class="HMFW_Map">
    <div class="menuList">
      <SubMenu :Routes="Routes" @onSelectNav="onSelectNav" :path="path"></SubMenu>
    </div>
    <div class="content">
      <transition name="fade" mode="out-in">
        <component :is="component" :path="path" :lmId="lmId"></component>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import SubMenu from '@/components/Navbar/SubMenu.vue';
import useMapStore from '@/store/modules/map';
import { ref } from 'vue';
import LSYG from './LSYG.vue';
import CFMS from './CFMS.vue';
import WHYZ from './WHYZ.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { setSubMenuList } from '@/views/hbwlpc/hooks/mixinsMenus';
const $szxcapi = (proxy as any)?.$szxcapi;
const path = ref('/lsyg');
const lmId = ref('');
const Routes = ref([
  // {
  //   path: '/lsyg',
  //   Name: '历史沿革'
  // },
  // {
  //   Name: '村风民俗',
  //   children: [
  //     {
  //       path: '/mfjx',
  //       Name: '民风家训'
  //     },
  //     {
  //       path: '/mswh',
  //       Name: '民俗文化'
  //     }
  //   ]
  // },
  // {
  //   Name: '文化遗址',
  //   children: [
  //     {
  //       path: '/whcc',
  //       Name: '文化传承'
  //     },
  //     {
  //       path: '/jgyz',
  //       Name: '景观遗址'
  //     }
  //   ]
  // },
  // {
  //   path: '/xfwm',
  //   Name: '乡风文明'
  // }
]);
const onSelectNav = (item) => {
  path.value = item.path;
  lmId.value = item.id;
  console.log('item', item);
};
const component = computed(() => {
  console.log('path.value', path.value);
  if (path.value === '/lsyg') {
    return LSYG;
  } else if (path.value === '/mfjx' || path.value === '/mswh') {
    return CFMS;
  } else if (path.value === '/whcc' || path.value === '/jgyz' || path.value === '/xfwm') {
    return WHYZ;
  }
  return LSYG;
});
onMounted(() => {
  init();
});
const init = async () => {
  $szxcapi.lmQuery().then(async ({ data }) => {
    const arr = await setSubMenuList(data);
    Routes.value = arr;
    if (arr[0].children && arr[0].children.length > 0) {
      lmId.value = arr[0].children[0].id;
    } else {
      lmId.value = arr[0].id;
    }
    console.log('arr', arr);
  });
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
// :deep(.el-dialog) {
//   // background: #2e79b0;
//   // background: rgb(25 61 96);
//   background: url('/images/popupBg.png');
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   color: white;
//   .el-dialog__headerbtn > .el-dialog__close {
//     color: white;
//   }
//   .el-dialog__header {
//     display: contents;
//     padding: 0px 15px;
//   }
//   .el-dialog__title {
//     color: white;
//   }
// }
.HMFW_Map {
  height: 100%;
  width: 100%;
  display: flex;
  .menuList {
    width: 160px;
  }
  .content {
    flex: 1;
  }
}
</style>
